<template>
	<view class="cu-modal " :class="showMyPoster?'show':''" @tap="hide">
		<view class="cu-dialog my-prize-dialog poster">			
			<view class="rule-container" >
				<view class="title" >
					规则说明
				</view>
				<view class="g_item">
					1、得票最高的前3条广告语，每条奖励现金1万元。投票结束后到重庆总部领取，外地中奖客户包往返机票；得票最高的前4-10名送500元充卡，11-20名送200充值卡，21-50名送100充值卡，51-100明送50元充值卡;
				</view>
				<view class="g_item">
					2、每个访客均可提交1次、3次或多次？（限5~10字，要求简单明了，朗朗上口，符合主题），每次提交奖励10~20元无门槛优惠券1张;
				</view>
				<view class="g_item">
					3、每个访问有2次投票机会，首次完成投票可获得0.2~8.8元现金红包及10~20元无门槛优惠券1张；第2次完成投票获得10~20元无门槛优惠券1张;
				</view>
				<view class="g_item">
					4、现金红包领取方式：直接提现到微信零钱;
				</view>
				<view class="g_item">
					5、优惠券领取方式：凭礼品码到“貂蝉到家”兑换即可直接使用；
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import UQRCode from 'uqrcodejs';
	import html2canvas from 'html2canvas'
	import { hb_class } from '../../utils/index.js'
	export default {
		data(){
			return {
				showMyPoster: false,
				myPosterlist: [],
				posterUrl: ''
			}
		},
		mounted() {
			this.getQr()
		},
		methods: {
			getQr(){
				const qr = new UQRCode();
				// qr.data = res.msg.url;
				qr.data = 'http://localhost:5173/'
				qr.size = 175;
				qr.make();
				const ctx = uni.createCanvasContext('qrcode', this);
				qr.canvasContext = ctx;
				qr.drawCanvas();
				
				uni.canvasToTempFilePath({
					canvasId: 'qrcode',
					success: (res) => {
						var hbinfo={back:{src:"/static/img/rule.jpg",w:600,h:1153},er:{src:res.tempFilePath,w: 220,h:220,pos:{left: 190,top: 825,}}};
						
						const qr = new hb_class(hbinfo)
						qr.init()
						qr.create().then(res=>{
							this.posterUrl = res
						})
					},
					fail: (err) => {
						console.error(err);
					}
				});		
			},
			// 获取海报链接地址
			getLink(openid){
				this.$comm.http('/api/activelove/share_url', {openid},"POST").then(res=>{
					if(res.code === 404){
						this.$emit('onInit')
						return
					}
					
				})
			},
			open(openid){
				this.showMyPoster = true
				this.getLink(openid)
			},
			hide(){
				this.showMyPoster = false
			}
		}
	}
</script>

<style lang="scss">
	.poster{
		background-color: transparent;
	}
	.content{
		position: relative;
		.close{
			margin-bottom: 10px;
		}
		.qrcode-content{
			background-color: #bc0c1b;
			width: 150rpx;
			height: 182rpx;
			position: absolute;
			bottom: 180rpx;
			right: -250rpx;
			.tips{
				font-size: 20rpx;
				color: #fff;
			}
		}
	}
	.rule-container {
		min-height: 300upx;
		display: flex;
		flex-direction: column;
		z-index: 3;
		background-image: linear-gradient(-180deg, #F48549 0%, #F2642E 100%);
		border: 18upx solid #E4431A;
		border-radius: 16px;
		padding:30upx;
		/* box-sizing: border-box; */
		color: #fff;
	}
	
	.rule-container .title {
		text-align: center;
		margin-bottom: 36upx;
		font-size: 40upx;
	}
	
	.rule-container .g_item {
		font-size: 30upx;
		color: #FFFFFF;
		letter-spacing: 0.5px;
		text-align: justify;
		line-height: 20px;
		margin-bottom: 10px;
	}
</style>